<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="height: 3000px;">
    <div id="app">
        <button @click="change">显示、消失</button>
        <home v-if="isShow"></home>
    </div>
    <script src="./vue.js"></script>
    <script>
        let Home = {
            template:`
                <div>
                    <button @click="add">增加一条</button>
                    <ul ref="oul">
                        <li v-for="item in arr" :key="item">
                            {{item}}
                        </li>
                    </ul>
                </div>
            `,
            data(){
                return {
                    arr:[1,2,3,4],
                    timer:null,
                    num:1
                }
            },
            methods:{
                add(){
                    this.arr.push(this.arr.length+1)
                },
                scroll(){
                    console.log("滚动条滚动啦距离是" + document.documentElement.scrollTop)
                }
            },
            beforeCreate(){
                console.log("组件初始化之前触发");
            },
            created(){
               
                console.log("组件已经初始化，已经加载实例属性和生命周期");
                // console.log(document.querySelector("#oul"))  无法获取dom
            },
            beforeMount(){
                console.log("视图 初始化  编译完成之前");
                // 清除 全局 绑定事件
            },
            mounted(){
                console.log("视图初始化 编译（加载、挂载）已经完成 ");
                console.log(this.$refs['oul'].children);
                window.onscroll = this.scroll;
                this.timer = setInterval(()=>{
                    console.log(++this.num)
                },1000)
            },
           
            beforeUpdate(){
                console.log("数据更新，编译完成之前");
                console.log(this.$refs['oul'].children);
            },
            updated(){
                console.log("数据更新，重新编译已经完成");
                console.log(this.$refs['oul'].children);
            },
            beforeDestroy(){
                console.log("组件销毁之前");
                window.onscroll = null;
                clearInterval(this.timer)
            },
            destroyed(){
                console.log("组件已经销毁");
            }
        }
        Vue.component("Home",Home)
        let vm = new Vue({
            el:"#app",
            data:{
                isShow:true
            },
            methods:{
                change(){
                    this.isShow = !this.isShow;
                }
            }
        })
/* 
        window.onscroll = fn;

        function fn(){
            console.log(document.body.scrollTop)
        } */
    </script>
</body>
</html>